<template>
  <div class="web-product-detail w-nav-height w-content-box">
    <br>
    <h2 class="title w-text-center">
      <p class="production-name">
        {{ model.name }}
        <span class="type">{{ model.type }}</span>
        <a
          v-if="model.url"
          :href="model.url"
          class="production-local"
          target="_blank"
        >
          <a-icon type="link" />
        </a>
      </p>
    </h2>
    <p v-if="model.version" class="versition w-text-center">
      版本：{{ model.version }}
    </p>
    <p class="date w-text-center text-time">
      <span>开始时间：{{ model.startDate | DateFormat }}</span>
      <span> - </span>
      <span>结束时间：{{ model.endDate | DateFormat }}</span>
    </p>
    <p v-if="model.describe" class="description w-text-center text-describe">
      {{ model.describe }}
    </p>
    <w-marked-parsing :datastr="model.content" />
    <w-comments :api="commentsApi" :comments-list="model.commentsList" @reload="reload"/>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Api } from '@/config/api'
import WMarkedParsing from '@/components/global/marked/custom/parsing'
import Product from '@/models/product'
import WComments from '@/components/global/comments'

@Component({
  layout: 'web',
  name: 'WebProductDetail',
  components: {
    WMarkedParsing,
    WComments
  },
  fetch ({ store }) {
    store.commit('app/SET_NAV_INDEX', '/web/product')
  },
  async asyncData ({ app, route }) {
    const { $wAxios } = app
    const detail = await $wAxios.$get(`${Api.product.detail}${route.params.id}`)
    return { model: detail }
  },
  head () {
    return {
      title: (this as WebProductDetail).model!.name
    }
  }
})
export default class WebProductDetail extends Vue {
  model: Product | null = null
  commentsApi = Api.product.comments

  reload () {
    this.$wAxios.$get(`${Api.product.detail}${this.$route.params.id}`).then((model) => {
      this.model = model
    })
  }
}
</script>

<style scoped lang="less">
.web-product-detail {
  .text-time {
    font-size: 13px;
    line-height: 2;
    color: #999;
  }

  .study-detail {
    padding: 30px 10px;
  }

  .production-name {
    padding: 0px 40px;
    display: inline-block;
    position: relative;
    > .type {
      font-size: 18px;
      color: #999;
    }
  }
  .description {
    color: #666;
    line-height: 24px;
    font-size: 16px;
    margin: 10px 0;
  }
  .production-local {
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 20px;
    height: 20px;
    color: #bfcbd9;
  }
  .versition {
    color: #999;
  }
}
</style>
